<template>
    <view class="container">
        <view class="user">
            <!-- #ifdef MP-WEIXIN -->
                <view class="left">
                    <!-- 如果能获取存储的登录信息就数据库的昵称 -->
                    <view class="nickname" v-if="JSON.stringify(business) !== '{}'">
                        {{business.nickname ? business.nickname : business.mobile_text}}
                    </view>

                    <!-- 如果没有获取到就会显示微信昵称 -->
                    <open-data v-else type="userNickName" class="nickname"></open-data>
                </view>
                <view class="right">
                    <view class="avatar xcx">
                        <u-avatar :src="business.avatar_cdn" size="90" v-if="JSON.stringify(business) !== '{}'"></u-avatar>

                        <!-- 如果没有获取到就会显示微信头像 -->
                        <open-data type="userAvatarUrl" v-else></open-data>
                    </view>
                </view>
            <!-- #endif -->

            <!-- H5 -->
			<!--  #ifdef H5 -->
            <view class="left">
                    <view class="nickname" v-if="JSON.stringify(business) !== '{}'">
                        {{business.nickname}}
                    </view>
                    <view class="nickname" v-else>
                        请选登陆
                    </view>
                    <view class="email" v-if="JSON.stringify(business) !== '{}'">
                        {{business.email}}
                    </view>
                </view>
                <view class="right">
                    <view class="avatar">
                        <u-avatar :src="business.avatar_cdn" size="90" v-if="JSON.stringify(business) != '{}'"></u-avatar>
                        <u-avatar src="/static/avatar.jpg" size="90" v-else></u-avatar>
                    </view>
                </view>
			<!-- #endif -->
        </view>

        <view class="menu" v-if="JSON.stringify(business) !== '{}'">
            <view class="item" hover-class="checkActive" @click="ToProduct">
                <view class="title">产品防伪管理</view>
                <u-icon name="arrow-right"></u-icon>
            </view>

            <!--  #ifdef MP-WEIXIN -->
            <view class="item" hover-class="checkActive" @click="onUnbinding">
                <view class="title">解除绑定账号</view>
                <u-icon name="arrow-right"></u-icon>
            </view>
            <!-- #endif -->

            <view class="item" hover-class="checkActive" @click="onLogout">
                <view class="title">退出账号</view>
                <u-icon name="arrow-right"></u-icon>
            </view>
        </view>

        <view class="actions">
			<!-- #ifdef MP-WEIXIN -->
			<view class="login" v-if="JSON.stringify(business) === '{}'">
				<u-button type="primary" icon="weixin-circle-fill" @click="onLogin">微信一键登陆</u-button>
			</view>
			<!-- #endif -->

			<!--  #ifdef H5 -->
			<view class="login" v-if="JSON.stringify(business) === '{}'">
				<u-button type="primary" @click="toLogin">登陆帐号</u-button>
			</view>
			<!-- #endif -->
		</view>
    </view>
</template>
<script>
export default{
    data() {
        return {
            business:{
                // id: 1,
                // nickname:'demo'
            }
        }
    },
    methods: {
        onLogin()
        {

        },
        toLogin()
        {
            this.$u.route('pages/business/login');
        },
        ToProduct()
        {
            this.$u.route('pages/business/list');
        },
        onLogout()
        {

        },
        onUnbinding()
        {

        }
    }
}
</script>

<style>
page{
    background-color: #eee;
}

.container{
    width: 95%;
    margin: 0 auto;
}

.user{
    display: flex;
    padding: 40px;
    background-color: #fff;
    margin-top: 10px;
    border-radius: 10px;
}

/* #ifdef H5  */
.user {
    align-items: center;
}
/* #endif */

.user .left {
    flex: 3;
}

/* 条件编译 */
/* #ifdef MP-WEIXIN  */
.user .left {
    flex: 3;
    display: flex;
    align-items: center;
    align-content: center;
}
/* #endif */


.user .right {
    flex: 1
}

.user .right .xcx {
    width: 200rpx;
    height: 200rpx;
    border-radius: 100%;
    overflow: hidden;
}

.user .left .nickname {
    font-size: 26px;
    font-weight: bold;
}

.actions {
    display: flex;
    padding: 20px 40rpx;
}

.login {
    flex: 1;
}

.menu{
    background-color: #fff;
    margin-top: 10px;
}

.menu .item{
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
    padding: 10px 10px;
    font-size: 14px;
}

.checkActive{
    background-color: rgba(233, 233, 233, 0.5);
}
</style>